<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>个人中心</title>
    <!-- import CSS -->
    <link rel="stylesheet" href="https://unpkg.com/element-ui/lib/theme-chalk/index.css">
</head>
<style>
    body {
        width: 100%;
        height: 1000px;
    }

    #app {
        width: 100%;
        height: 100%;
        background-color: rgba(0, 255, 255, 0.1);
    }

    .el-header, .el-footer {
        background-color: #B3C0D1;
        color: #333;
        text-align: center;
        line-height: 60px;
    }

    .el-aside {
        background-color: #D3DCE6;
        color: #333;
        text-align: left;
        line-height: 30px;
    }

    .el-main {
        background-color: #E9EEF3;
        color: #333;
        text-align: left;
        line-height: 30px;
    }


</style>
<body>

<div id="app">
    <a href="index.html" style="text-decoration: none;margin-top: 10px;height: 30px">返回</a>
    <el-container style="width: 100%;height: 100%;">
        <el-aside width="15%" style="height: 100%;color: #303133">
            <el-menu :default-openeds="[openIndex]" @select="menuChange">

                <el-submenu index="1">
                    <template slot="title"><i class="el-icon-location"></i>账号管理</template>
                    <el-menu-item index="1-1">个人资料</el-menu-item>
                    <el-menu-item index="1-2">切换账号</el-menu-item>
                    <el-menu-item index="1-3">修改信息</el-menu-item>
                </el-submenu>
                <el-submenu index="2">
                    <template slot="title"><i class="el-icon-menu"></i>消息通知</template>
                    <el-menu-item index="2-1">我赞过的</el-menu-item>
                    <el-menu-item index="2-2">他赞过我</el-menu-item>
                </el-submenu>
                <el-submenu index="3">
                    <template slot="title"><i class="el-icon-menu"></i>我的订单</template>
                    <el-menu-item index="3-1">订单链表</el-menu-item>
                </el-submenu>
            </el-menu>
        </el-aside>
        <el-main style="height: 100%">
            <div v-show="index=='1-1'" style="background-color: rgba(255,255,255,0.1)">
                <span><h4>用户名:{{user.username}}</h4></span>
                <br>
                <span><h4>昵称:{{user.nick}}</h4></span>
                <br>
                <span><h4>性别:{{user.sex}}</h4></span>
                <br>
                <span><h4>联系方式:{{user.phone}}</h4></span>
                <br>
                <span><h4>地址:{{user.address}}</h4></span>
            </div>
            <div v-show="index=='1-2'" style="background-color: rgba(255,255,255,0.1)">
                <el-card
                        style="width: 60%; height:60%; margin: 0 auto;background-color:rgba(0,255,255,0.2);padding-top: 50px">
                    <el-form style="width: 80%;margin: 0 5%; " label-width="60px" label-position="left">
                        <el-form-item style="font-size: 24px;color: black">
                            <el-input type="text" v-model="users.username" placeholder="请输入用户名"
                                      style="font-size: 20px;color: black">
                            </el-input>
                        </el-form-item>
                        <el-form-item style="font-size: 24px;color: black">
                            <el-input type="password" v-model="users.password" placeholder="请输入密码"
                                      style="font-size: 20px;color: black">
                            </el-input>
                        </el-form-item>
                        <el-form-item style="margin-top:30px;margin-left: 0%">
                            <el-button style="width: 80px;height: 50px;font-size: 20px;text-align: center"
                                       @click="login()">登录
                            </el-button>
                        </el-form-item>
                    </el-form>
                </el-card>
            </div>
            <div v-show="index=='1-3'" style="width: 100%; height:80%;background-color: rgba(0,255,0,0.1)">
                <el-card style="width: 45%; height:70%;background-color:rgba(0,255,255,0.2);float: left">
                    <p>基本信息修改:</p>
                    <el-form label-position="left" label-width="80px" :model="users">
                        <el-form-item label="用户名">
                            <el-input v-model="users.username"></el-input>
                        </el-form-item>
                        <el-form-item label="昵称">
                            <el-input v-model="users.nick"></el-input>
                        </el-form-item>
                        <el-form-item label="性别">
                            <select v-model="users.sex" style="width: 100px;height: 30px">
                                <option>男</option>
                                <option>女</option>
                            </select>
                        </el-form-item>
                        <el-form-item label="联系方式">
                            <el-input v-model="users.phone"></el-input>
                        </el-form-item>
                        <el-form-item label="地址">
                            <el-input v-model="users.address"></el-input>
                        </el-form-item>
                        <el-form-item style="margin-top:30px;margin-left: 0%">
                            <el-button style="width: 80px;height: 50px;font-size: 20px;text-align: center"
                                       @click="update()">提交
                            </el-button>
                        </el-form-item>
                    </el-form>
                </el-card>
                <el-card style="width: 50%; height:70%;background-color:rgba(0,255,255,0.2);float: right">
                    <p>密码修改:</p>
                    <el-form label-position="left" label-width="80px" :model="code">
                        <el-form-item label="原密码">
                            <el-input v-model="code.password"></el-input>
                        </el-form-item>
                        <el-form-item label="新密码">
                            <el-input v-model="code.newpassword"></el-input>
                        </el-form-item>
                        <el-form-item label="确认新密码">
                            <el-input v-model="code.newspassword"></el-input>
                        </el-form-item>
                        <el-button
                                style="width: 80px;height: 50px;font-size: 20px;margin-left: 28%;margin-top: 10%; text-align: center"
                                @click="updatePassword()">修改
                        </el-button>
                    </el-form>
                </el-card>
            </div>
            <div v-show="index=='2-1'" style="margin: 20px">
                <div style="overflow: auto" v-for="comment in comments">
                    <img v-for="url in comment.urlArr" :src="url" alt="" style="width: 20%;height: 100px">
                    <span style="display: block"> {{comment.nick}}说:</span>{{comment.content}}
                    <br>
                    发布于:{{comment.created}}
                </div>
            </div>
            <div v-show="index=='2-2'" style="margin: 20px;width: 100%;height: 100%;">
                <div  v-for="comment in v.List" style="width:400px;display: inline-block">
                    <img v-for="url in comment.urlArr" :src="url" alt="" style="width: 20%;height: 100px">
                    <span style="display: block"> {{comment.nick}}说:</span>{{comment.content}}
                    <br>
                    发布于:{{comment.created}}
                    </h4>
                    <div>
                        <span><a href="javascript:void (0)" @click="getUser(comment.id)" style="text-decoration: none">谁赞过</a></span>
                    </div>
                </div>
                <div v-for="u in userArr" style="width: 300px; height: 200px ;background-color:rgba(0,230,125,0.1); margin-top: -10px ;display: inline-block;float: right">
                    <p>{{u.nick}}</p>
                </div>
            </div>
            <div v-show="index=='3-1'" style="background-color: rgba(255,255,255,0.1)" @click="openOrder()">
                <el-card>
                    <el-row gutter="10">
                        <!--商品信息开始-->
                        <el-col :span="2">
                            <!--商品图片开始-->
                            <el-image
                                    style="width: 100px; height: 100px;border-radius: 30px"
                                    :src="url"
                                    fit="cover">
                            </el-image>
                            <!--商品图片结束-->
                        </el-col>
                        <el-col :span="8">
                            <!--商品介绍开始-->
                            <p>洛川大苹果</p>
                            <p style="color: #99a9bf">规格</p>
                            <!--商品介绍结束-->
                        </el-col>
                        <el-col :span="2">
                            <!--商品数量价格开始-->
                            <p>￥49.00</p>
                            <p style="color: #99a9bf">*1</p>
                            <!--商品数量价格结束-->
                        </el-col>
                        <!--商品信息结束-->
                    </el-row>
                    <el-row>
                        <el-col :span="6" push="18">
                            <span style="color: #99a9bf;font-size: 20px">含运费险服务</span>
                            <span style="color: #303133;font-weight: 700;font-size: 25px">实付款￥49.00</span>
                        </el-col>
                    </el-row>
                </el-card>
            </div>
        </el-main>
    </el-container>
</div>
</body>
<script src="js/vue.min.js"></script>
<!-- import JavaScript -->
<script src="js/eui.js"></script>
<script src="js/axios.js"></script>
<script>
    const rule = /^(13[0-9]|14[5-9]|15[012356789]|166|17[0-8]|18[0-9]|19[8-9])[0-9]{8}$/;
    let v = new Vue({
        el: '#app',
        data: function () {
            return {
                logs:false,
                cookname: "",
                index: "1-1",
                openIndex: "1",
                code: {
                    password: "",
                    newpassword: "",
                    newspassword: ""
                },
                users: {
                    username: "",
                    password: "",
                    sex: "",
                    phone: "",
                    address: ""
                },
                user: {},
                comment: {
                    nick: '',
                    title: '',
                    content: '',
                    url: '',
                    created: '',
                    userId: '',
                    quantity: ''
                },
                List: [],
                comments: [],
                userArr:[],
                url: 'https://fuss10.elemecdn.com/e/5d/4a731a90594a4af544c0c25941171jpeg.jpeg',
            }
        },
        created: function () {
            axios.get("/center/select").then(function (response) {
                console.log(response.data)
                if (response.data == "") {
                    v.$message.error("请先登录!")
                    setTimeout(function () {
                        location.href = "login.html";
                    }, 500)
                } else {
                    v.user = response.data;
                }
            })
            axios.get("/center/selectcomment").then(function (response) {
                if (response == null) {
                    v.$message.error("请先登录")
                    location.href = "login.html";
                } else {
                    v.comments = response.data;
                    for (let commented of v.comments) {
                        commented.urlArr = commented.url == "" ? [] : commented.url.split(",")
                    }
                }
            })
            axios.get("/center/selectmycomment").then(function (response) {
                if (response == null) {
                    v.$message.error("请先登录")
                    location.href = "login.html";
                }
                v.List = response.data;
                for (let commented of v.List) {
                    commented.urlArr = commented.url == "" ? [] : commented.url.split(",")
                }
            })
            if (location.search.indexOf('index') != -1) {
                this.index = location.search.split("=")[1]
                this.openIndex = location.search.split("-")[0]
            }
        },
        methods: {
            openOrder() {
                location.href = "order.html";
            },
            menuChange(index) {
                console.log(index)
                location.href = "center.html?index=" + index
            },
            login() {
                axios.post("/center/login", v.users).then(function (response) {
                    console.log(response.data);
                    if (response.data == 1) {
                        v.$message.success("登陆成功!")
                        v.cookname = v.user.nick;
                        setTimeout(function () {
                            location.href = "center.html"
                        }, 1000)
                    } else if (response == 0) {
                        v.$message.error("账号或密码错误!")
                    }
                })
            },
            update() {
                if (rule.test(v.users.phone)) {
                    axios.post("/center/update", v.users).then(function () {
                        location.href = "center.html"
                    })
                } else {
                    v.$message.warning("电话号码不符合规范")
                    v.user.username = ""
                    v.user.nick = "";
                    v.user.sex = ""
                    v.user.phone = ""
                    v.user.address = ""
                }

            },
            updatePassword() {
                if (v.code.password == null || v.code.newpassword == null || v.code.newspassword == null) {
                    v.$message.warning("密码不能为空!!")
                } else if (v.code.password == v.code.newpassword) {
                    v.$message.warning("新旧密码一样!")
                    v.code.newpassword = ""
                } else if (v.code.newpassword !== v.code.newspassword) {
                    v.$message.error("两次密码输入不一致!")
                    v.code.newpassword = ""
                    v.code.newspassword = ""
                } else {
                    axios.post("/center/password", v.code).then(function (response) {
                        console.log(response.data)
                        if (response.data == 1) {
                            v.$message.success("修改成功")
                            v.code.password = ""
                            v.code.newpassword = ""
                            v.code.newspassword = ""
                        } else {
                            v.$message.error("原密码错误!")
                            v.code.password = ""
                            v.code.newpassword = ""
                            v.code.newspassword = ""
                        }
                    })
                }
            },
            getUser(id) {
                axios.get("/center/selectUser?id="+id).then(function (response){
                    v.userArr = response.data;
                })
            }
        }
    })
</script>
</html>